<template>
    <div>
        <div class="blocklyDiv" ref="blocklyDiv"></div>
        <!-- <xml ref="blocklyToolbox" style="display: none;">
            <slot></slot>
        </xml> -->
    </div>
</template>

<script lang="ts">

import { defineComponent } from '@vue/runtime-core'
import Blockly from 'blockly'

export default defineComponent({
    name: 'BlocklyCompoment',
    props:['options'],
    data() {
        return { workspace: null }
    },
    mounted() {
        const options = this.$props.options || {};
        if (!options.toolbox) {
            options.toolbox = this.$refs["blocklyToolbox"];
        }
        this.workspace = Blockly.inject(this.$refs["blocklyDiv"] as string, options) as any;
    }
})
</script>

<style scoped>
.blocklyDiv {
    height: 100%;
    width: 100%;
    text-align: left;
}
</style>